<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="../js/vue.js"></script>
    <!-- 引入日期格式化的JavaScript -->
    <script src="../js/dayjs.min.js"></script>
</head>

<body>
    <!-- 
        过滤器:
            定义:对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
            语法:
                1.注册过滤器: Vue.filter(name, callback)或new Vue{filters:{}
                2.使用过滤器:{{xxx│过滤器名}}或v-bind:属性= “xxx│过滤器名"
            备注:
                1.过滤器也可以接收额外参数、多个过滤器也可以串联
                2.并没有改变原本的数据,是产生新的对应的数据 
    -->

    <div id="app">
        <h2>格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h3>现在是：{{ftmTime}}</h3>
        <!-- method实现 -->
        <h3>现在是：{{getFmtTime()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是：{{time | timeFormatter}}</h3>
        <!-- 过滤器实现(传参) -->
        <h3>现在是：{{time | timeFormatter('YYYY_MM_DD')}}</h3>
        <!-- 过滤器(串联) -->
        <h3>现在是：{{time | timeFormatter('YYYY_MM_DD') | mySlice}}</h3>
    </div>
    
    <div id="app2">
        <h2>{{message | mySlice}}</h2>
    </div>
    <script>
    //配置完全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
     // 定义全局过滤器
     Vue.filter('mySlice',function(value){
        return value.slice(0,4);
     });
        var vm = new Vue({
           el:'#app',
           data:{
               time: 1634105513335// 时间戳
           },
           methods:{
               getFmtTime(){
                   return dayjs(this.time).format("YYYY年MM月DD日 HH点mm分ss秒");
               }
           },
           computed: {
               ftmTime(){
                   return dayjs(this.time).format("YYYY年MM月DD日 HH点mm分ss秒");
               }
           },
           // 局部过滤器
           filters: {
               timeFormatter(value,str='YYYY年MM月DD日 HH点mm分ss秒'){
                    return dayjs(value).format(str);
               }
           }
        });

        new Vue({
            el: '#app2',
            data: {
                message: 'hello,atguigu'
            }
        });
    </script>
</body>

</html>